<template>
  <div class="login">
    <div class="loginBox">
      <div class="main">
        <div class="right">
          <div class="top">
            <div :class="showTab ? 'active' : ''" @click="showTab = true">手机密码登录</div>
            <div :class="!showTab ? 'active' : ''" @click="showTab = false">手机验证码登录</div>
          </div>
          <div class="center" v-show="showTab">
            <el-form ref="accountLoginForm" :model="accountLoginForm" :rules="accountLoginFormRule" label-width="90px">
              <el-form-item prop="username" label="手机号">
                <el-input v-model="accountLoginForm.username" placeholder="请输入手机号" clearable></el-input>
              </el-form-item>
              <el-form-item prop="password" label="密码">
                <el-input v-model="accountLoginForm.password" placeholder="请输入密码" type="password" clearable></el-input>
              </el-form-item>
              <el-form-item prop="imgCode" label="验证码">
                <div class="inputBox">
                  <div class="inputLeft">
                    <el-input v-model="accountLoginForm.imgCode" :placeholder="$t('login-placeholder-imgCode')" clearable></el-input>
                  </div>
                  <div class="inputRight">
                    <img :src="captchaImg" @click="getImgCode" :alt="$t('login-imgCode-error')" style="width: 160px; cursor: pointer; display: block" />
                  </div>
                </div>
              </el-form-item>
              <el-button type="primary" class="btn-long" @click="submitLogin">{{ $t("login-btn") }}</el-button>
            </el-form>
          </div>
          <div class="center" v-show="!showTab">
            <el-form ref="mobileCodeForm" :model="mobileCodeForm" :rules="mobileCodeFormRule" label-width="90px">
              <el-form-item prop="mobile" label="手机号">
                <el-input v-model="mobileCodeForm.mobile" placeholder="请输入手机号" clearable></el-input>
              </el-form-item>
              <el-form-item prop="code" label="验证码">
                <div class="inputBox">
                  <div class="inputLeft">
                    <el-input v-model="mobileCodeForm.code" :placeholder="$t('login-placeholder-sms')" clearable></el-input>
                  </div>
                  <div class="inputRight">
                    <common-countdown-button ref="countDown" :autoCountDown="false" :loading="sending" :text="getSms" :suffixText="$t('suffixText')" @on-click="sendSmsCodeFun" />
                  </div>
                </div>
              </el-form-item>
              <el-button type="primary" class="btn-long" @click="submitLoginCode">{{ $t("login-btn") }}</el-button>
            </el-form>
          </div>
          <div class="bottom">
            <span class="txtBox"
              >{{ $t("login-tip-reg") }}
              <span class="hand span" @click="go2Reg">{{ $t("login-btn-reg") }}</span>
              <span class="hand span forgot" @click="go2Reset">{{ $t("login-btn-forgot") }}</span>
            </span>
            <a :href="localeCn ? '/' : '/en'" class="ml20">{{ $t("tip-home") }}</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCodeImg, sendSmsCode } from "@/api/login";
import { isMobile, validateMobile } from "@/libs/validate";
export default {
  name: "login",
  head() {
    return {
      title: this.$store.state.seo.title,
      meta: [
        {
          hid: "description",
          name: "description",
          content: this.$store.state.seo.description,
        },
        {
          hid: "keywords",
          name: "keywords",
          content: this.$store.state.seo.keywords,
        },
      ],
    };
  },
  data() {
    return {
      redirect: undefined,
      captchaId: "",
      captcha: "", //短信图形验证码
      captchaImg: "",
      loadingCaptcha: false, //加载短信图形验证码
      loading: false,
      showTab: true,
      accountLoginForm: {
        imgCode: "",
        username: "",
        password: "",
      },
      mobileCodeForm: {
        code: "",
        mobile: "",
      },
      accountLoginFormRule: {
        username: [
          {
            required: true,
            message: this.$t("login-no-data-mobile"),
            trigger: "blur",
          },
          {
            validator: validateMobile,
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: this.$t("login-no-data-pwd"),
            trigger: "blur",
          },
        ],
        imgCode: [
          {
            required: true,
            message: this.$t("login-no-data-sms"),
            trigger: "blur",
          },
        ],
      },
      mobileCodeFormRule: {
        mobile: [
          {
            required: true,
            message: this.$t("login-no-data-mobile"),
            trigger: "blur",
          },
          {
            validator: validateMobile,
            trigger: "blur",
          },
        ],
        code: [
          {
            required: true,
            message: this.$t("login-no-data-sms"),
            trigger: "blur",
          },
        ],
      },
      getSms: this.$t("get-sms"),
      sending: false,
    };
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.setFromPage(from.path);
    });
  },
  mounted() {
    this.getImgCode();
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
  },
  methods: {
    setFromPage(path) {
      this.redirect = path;
    },
    // 获取手机验证码
    sendSmsCodeFun() {
      if (!this.mobileCodeForm.mobile) {
        this.$message.error(this.$t("login-placeholder-mobile"));
        return;
      }
      if (!isMobile(this.mobileCodeForm.mobile)) {
        this.$message.error(this.$t("login-placeholder-mobile-format"));
        return;
      }
      delete this.mobileCodeForm.code;
      this.sending = true;
      this.getSms = this.$t("tip-sending");
      this.invoke(sendSmsCode, this.mobileCodeForm.mobile).then((res) => {
        this.getSms = this.$t("get-sms");
        this.sending = false;
        if (res && res.code == 200) {
          this.$message.success(this.$t("sended-success"));
          // 开始倒计时
          this.$refs.countDown.startCountDown();
        }
      });
    },
    // 获取图形验证码
    getImgCode() {
      this.loadingCaptcha = true;
      this.invoke(getCodeImg).then((res) => {
        this.loadingCaptcha = false;
        if (res && res.code == 200) {
          this.captchaId = res.captchaId;
          this.captchaImg = "data:image/gif;base64," + res.img;
        }
      });
    },
    afterLogin(res) {
      this.$store
        .dispatch("GetInfo")
        .then((res) => {
          this.loading = true;
          this.$router
            .push({
              path: this.redirect.indexOf('reset')===-1 ? this.redirect: "/",
            })
            .catch(() => {});
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 账户密码登录
    submitLogin() {
      this.$refs.accountLoginForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          console.log(this.accountLoginForm)
          this.$store
            .dispatch("Login", {
              username: this.accountLoginForm.username,
              password: this.accountLoginForm.password,
              code: this.accountLoginForm.imgCode,
              captchaId: this.captchaId,
            })
            .then((res) => {
              this.afterLogin(res);
            })
            .catch(() => {
              this.loading = false;
              this.getImgCode();
            });
        }
      });
    },
    // 手机验证码登录
    submitLoginCode() {
      this.$refs.mobileCodeForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$store
            .dispatch("SmsLogin", {
              mobile: this.mobileCodeForm.mobile,
              code: this.mobileCodeForm.code,
            })
            .then((res) => {
              this.afterLogin(res);
            });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.login {
  width: 100vw;
  height: 100vh;
  background: url("@/assets/images/loginBg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;

  .loginBox {
    $h: 50px;
    $fz: 20px;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;

    .main {
      padding: 78px 64px;
      background: #ffffff;
      display: flex;
      align-items: flex-start;
      justify-content: center;

      .right {
        .top {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 30px;
          font-weight: 400;
          color: #191e33;
          line-height: 1em;
          margin-bottom: 60px;
          cursor: pointer;

          .active {
            color: #d53b76;
          }
        }

        .center {
          :deep(.el) {
            &-form {
              &-item {
                &__label {
                  color: #4f4f4f;
                  font-size: $fz;
                  line-height: $h;
                }
              }
            }

            &-input {
              &__inner {
                width: 450px;
                height: $h;
                border-radius: 0;
                border: 1px solid #cdcdcd;
                color: #333;
                font-size: $fz;
              }
            }
          }

          :deep(.btn-long) {
            width: 100%;
            margin: 0 auto;
            background-color: #e35191;
            display: block;
            height: $h;
            border-radius: 0;
            border: none;
            font-size: $fz;
          }

          .inputBox {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .inputLeft {
              $w: 270px;
              flex: 0 0 $w;
              width: $w;

              :deep(.el-input__inner) {
                width: $w;
              }
            }

            .inputRight {
              $w: 160px;
              flex: 0 0 $w;
              width: $w;
              align-items: center;
              justify-content: flex-end;

              :deep(.el-button) {
                width: $w;
                height: $h;
                background-color: #659bfd;
                border-color: #659bfd;
                color: #ffffff;
                border-radius: 0;
                font-size: $fz;
              }
            }
          }

          .btn-long {
            margin-top: 40px;
          }
        }

        .bottom {
          font-size: $fz;
          font-weight: 400;
          color: rgba(25, 30, 51, 0.5);
          line-height: 1;
          margin-top: 30px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .em {
            color: #659bfd;
          }

          .span {
            color: #d53b76;

            &.forgot {
              margin-left: 20px;
            }
          }

          :deep(.el) {
            &-checkbox {
              font-size: $fz;

              &__inner {
                width: $fz;
                height: $fz;

                &::after {
                  height: 10px;
                  left: 7px;
                }
              }

              &__label {
                font-size: $fz;
              }
            }
          }
        }
      }
    }
  }
}
</style>
<style lang="scss" scoped>
@media (min-width: 800px) and (max-width: 1570px) {
  .login {
    .loginBox {
      .main {
        padding: 62px 52px;

        .left {
          .title {
            font-size: 24px;
          }

          img {
            width: 240px;
            height: 240px;
          }
        }

        .right {
          .top {
            font-size: 22px;
            margin-bottom: 40px;
          }

          .center {
            :deep(.el-input__inner) {
              height: 45px;
              font-size: 16px;
            }

            :deep(.el) {
              &-input {
                &__inner {
                  width: 350px;
                }
              }
            }

            :deep(.el-form-item) {
              margin-bottom: 20px;
            }

            .inputBox {
              .inputLeft {
                $w: 200px;
                flex: 0 0 $w;
                width: $w;

                :deep(.el-input__inner) {
                  width: $w;
                }
              }

              .inputRight {
                $w: 130px;
                flex: 0 0 $w;
                width: $w;

                :deep(.el-button) {
                  width: 130px;
                  height: 45px;
                  font-size: 16px;
                }
              }
            }

            .btn-long {
              margin-top: 20px;
            }
          }
        }

        .bottom {
          font-size: 16px !important;
        }
      }
    }
  }
}
</style>

<style lang="scss" scoped>
@media (max-width: 750px) {
  .login {
    background-size: cover;

    .loginBox {
      .main {
        padding: 30px 20px;

        .left {
          display: none;
        }

        .right {
          .top {
            font-size: 18px;
            margin-bottom: 20px;
          }

          .center {
            .el-form-item {
              margin-bottom: 0px;
            }

            :deep(.el-form-item__label) {
              font-size: 12px;
              width: 60px !important;
              box-sizing: border-box;
              padding-right: 0;
              float: unset;
            }

            :deep(.el-form-item__content) {
              margin-left: 0px !important;
            }

            :deep(.el-input__inner) {
              width: 100%;
              margin-bottom: 0;
              height: 40px;
              font-size: 14px;
            }

            .inputBox {
              .inputLeft {
                flex: 0 0 180px;
                width: 180px;

                :deep(.el-input__inner) {
                  width: 160px;
                }
              }

              .inputRight {
                flex: 0 0 110px;
                width: 110px;

                :deep(.el-button) {
                  width: 110px;
                  height: 40px;
                  font-size: 14px;
                }
              }
            }

            .btn-long {
              font-size: 14px;
              height: 40px;
            }
          }
        }

        .bottom {
          font-size: 12px !important;
        }
      }
    }
  }
}
</style>
